import React from 'react';
import PropTypes from 'prop-types';
import { Dialog } from '@teamix/ui';
import Pagination from 'components/commonPagination';
import { YunxiaoTable, Title } from '@alife/devops-ui';
import exceed from 'utils/apimap';
import './logDialog.scss';
import intl from '../../../../../../../../../locale';

const { id: org_id } = window.FORCE.organization;

export default class DisableReposDialog extends React.Component {
  static propTypes = {
    trigger: PropTypes.element,
  };

  static defaultProps = {
    trigger: null,
  };

  constructor(props) {
    super(props);

    this.state = {
      isModalOpen: false,
      isLoading: true,
      page: 1,
    };
  }

  getData(page) {
    this.setState({
      isLoading: true,
    });

    const { record_no } = this.props;

    exceed
      .forceFetch({
        api: 'org.backup.projectBackupList',
        params: {
          org_id,
        },

        data: {
          per_page: 10,
          page,
          record_no,
        },
      })
      .then((result) => {
        const { list } = result;
        const total = result.amount || 0;
        this.setState({
          list,
          isLoading: false,
          total,
          page,
        });
      });
  }

  showModal = () => {
    this.getData(1);

    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.setState({
      isModalOpen: false,
    });
  };

  onPageNoChange = (page) => {
    this.getData(page);
  };

  render() {
    const { list, isLoading, total, page } = this.state;
    return (
      <React.Fragment>
        {this.state.isModalOpen ? (
          <Dialog
            title={intl.get({
              id: 'code-assets.backup.containers.logDialog.BackupFailureDetails',
              defaultMessage: '备份失败详情',
            })}
            visible
            onCancel={this.onClose}
            onClose={this.onClose}
            footer={false}
            className="backup-fail-dialog"
          >
            <YunxiaoTable hasBorder dataSource={list} loading={isLoading}>
              <YunxiaoTable.Column
                title={intl.get({
                  id: 'code-assets.backup.containers.logDialog.CodeBase',
                  defaultMessage: '代码库',
                })}
                dataIndex="project_name"
                cell={(value, index, record) => {
                  return (
                    <Title
                      align="t"
                      trigger={
                        <a
                          href={`/${record.project_full_path}`}
                          target="_blank"
                          onClick={(e) => {
                            if (!record.project_full_path) {
                              e.preventDefault();
                            }
                          }}
                          rel="noreferrer"
                        >
                          {record.project_name}
                        </a>
                      }
                    >
                      <div>{record.project_name}</div>
                    </Title>
                  );
                }}
                className={'repo-col'}
                width={200}
              />

              <YunxiaoTable.Column
                title={intl.get({
                  id: 'code-assets.backup.containers.logDialog.CauseOfFailure',
                  defaultMessage: '失败原因',
                })}
                dataIndex="error_msg"
                cell={(value) => {
                  return (
                    <Title align="t" trigger={<span>{value || '-'}</span>}>
                      {value}
                    </Title>
                  );
                }}
                width={300}
              />
            </YunxiaoTable>
            <Pagination
              onChange={this.onPageNoChange}
              current={page}
              total={total}
              showJump={false}
              hideOnlyOnePage
            />
          </Dialog>
        ) : null}
        {!!this.props.trigger &&
          React.cloneElement(this.props.trigger, { onClick: this.showModal })}
      </React.Fragment>
    );
  }
}
